<!--
 * @Description: 销售机会
 * @Author: wangwangwang
 * @Date: 2020-08-17 15:52:16
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-08-11 15:31:34
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">工程名称</span>
                <el-input v-model="tableParam.name" style="width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">状态</span>
                <el-select v-model="tableParam.salesLeadsStatus" placeholder="请选择">
                  <el-option v-for="(item, index) in salesLeadsStatusList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="tableParamType = true">高级搜索</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0;" @click="addForm()">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                添加
              </el-button>
            </div>
          </div>
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
              <el-table-column align="center" label="工程名称">
                <template slot-scope="scope">
                  <span class="top_link" @click="datails(scope.row)">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="地理位置" min-width="230" prop="place"></el-table-column>
              <el-table-column align="center" label="工程性质" prop="type"></el-table-column>
              <el-table-column align="center" label="施工单位" prop="roadwork"></el-table-column>
              <el-table-column align="center" label="联系人" prop="roadworklInkman"></el-table-column>
              <el-table-column align="center" label="联系电话" prop="roadworkPhone" min-width="100"></el-table-column>
              <el-table-column align="center" label="状态" prop>
                <template slot-scope="scope">
                  <span>{{ salesLeadsStatusList | fromatTable(scope.row.salesLeadsStatus, 'name', 'id') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="320" align="left">
                <template slot-scope="scope">
                  <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='GENJINJL'))!==-1" size="mini" class="bottom_one" @click="changesaleProgress(scope.row)">跟进记录</el-button>
                  <el-button v-if="scope.row.salesLeadsStatus >= 2 && scope.row.salesLeadsStatus <= 5&&ButtonList.findIndex(res=>(res.buttonValue=='DENGJIGC'))!==-1" size="mini" class="bottom_one" @click="changeVisited(scope.row,true,false)">登记工程</el-button>
                  <el-button v-if="scope.row.salesLeadsStatus<5&&ButtonList.findIndex(res=>(res.buttonValue=='TINGZHIGJ'))!==-1" size="mini" class="bottom_one" @click="ignoreSubmit(scope.row)">停止跟进</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <!-- 登记工程 -->
    <regproject type="1" :status="visited" :sendData="visitedata" @close="close" @sumbit="sumbit" @executePhaseType="executePhaseType"></regproject>
    <!-- 跟进记录 -->
    <el-dialog v-dialogDrag :visible.sync="saleProgressDialog" width="980px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">{{ itemdata.name }}（{{ itemdata.roadwork }}）</span>
      <div class="saledialoginfo">
        <div :class="itemdata.salesLeadsStatus>5?'styleA':'styleB'">
          <el-timeline>
            <template v-for="(item, index) in saleProgressData">
              <el-timeline-item :key="index" :timestamp="new Date(item.createTime).Format('yyyy-MM-dd')" placement="top">
                <el-card>
                  <p>{{ item.content }}</p>
                  <div style="text-align: right;">更新人：{{ item.userName }}</div>
                </el-card>
              </el-timeline-item>
            </template>
            <div v-show="saleProgressData.length==0" style="text-align:center;">
              暂无记录
            </div>
          </el-timeline>
        </div>
        <div v-if="itemdata.salesLeadsStatus<6">
          <span>填写更新内容：</span>
          <div style="padding: 20px 10px 0 68px;">
            <el-input v-model="saleProgresscontent" type="textarea" :rows="5" resize="none" placeholder="请输入" clearable></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="saleProgressDialog = false">取 消</el-button>
        <el-button class="bottom_all" :disabled="disabled" @click="sumbitsaleProgress">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 停止跟进 -->
    <el-dialog v-dialogDrag :visible.sync="ignoreVisible" width="580px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">请填写停止跟进原因：</span>
      <div class="dialoginfo">
        <el-form ref="refreasonForm" :model="reasonForm" :rules="rules">
          <el-form-item prop="remark">
            <el-input v-model="reasonForm.remark" :rows="5" resize="none" type="textarea" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="ignoreVisible = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="searchSubmit()">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog v-dialogDrag :visible.sync="datailsDialog" width="580px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">工程信息</span>
      <div class="dialoginfo">
        <el-form :inline="true" label-width="90px">
          <el-form-item label="工程名称  :">
            <div style="width: 150px;">{{ datailsData.name }}</div>
          </el-form-item>
          <el-form-item label="地理位置  :">
            <div style="width: 150px;">{{ datailsData.place }}</div>
          </el-form-item>
          <el-form-item label="工程性质  :">
            <div style="width: 150px;">{{ datailsData.type }}</div>
          </el-form-item>
          <el-form-item label="施工单位  :">
            <div style="width: 150px;">{{ datailsData.roadwork }}</div>
          </el-form-item>
          <el-form-item label="工程联系人  :">
            <div style="width: 150px;">{{ datailsData.roadworklInkman }}</div>
          </el-form-item>
          <el-form-item label="联系电话  :">
            <div style="width: 150px;">{{ datailsData.roadworkPhone }}</div>
          </el-form-item>
          <el-form-item label="工程提交人  :">
            <div style="width: 150px;">{{ datailsData.createUserName }}</div>
          </el-form-item>
          <el-form-item label="提交电话  :">
            <div style="width: 150px;">{{ datailsData.createUserPhone }}</div>
          </el-form-item>
          <el-form-item label="提交时间  :">
            <div style="width: 150px;">{{ datailsData.createTime }}</div>
          </el-form-item>
          <div>
            <el-form-item label="经营等级 :">
              <el-rate v-model="datailsData.businessRegistration" style="margin-top:7px;" disabled>
              </el-rate>
            </el-form-item>
          </div>
          <el-form-item label="分派备注 :">
            <el-input v-model="datailsData.dispatchRemark" disabled="" style="width:380px;" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="图片信息  :">
            <span v-if="!datailsData.imgs" style="color: #808080;">未提供</span>
            <span v-if="datailsData.imgs" class="top_link" @click="showimgs()">查看</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="datailsDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 查看图片 -->
    <el-dialog v-dialogDrag :visible.sync="imgsDialog" width="980px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">图片信息</span>
      <div class="dialoginfo">
        <div>
          <el-image v-for="(item, index) in srcList" :key="index" style="width: 200px; height:200px;margin:0 10px 10px 10px;border-radius: 4px;" :src="item" :preview-src-list="srcList" :z-index="10000"></el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="imgsDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 高级搜索 -->
    <el-dialog v-dialogDrag :visible.sync="tableParamType" width="650px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">高级搜索</span>
      <div class="dialoginfo">
        <el-form ref="reftableParam" :inline="true" :model="tableParam" label-width="110px">
          <el-form-item prop="code">
            <span slot="label">工程性质</span>
            <el-select v-model="tableParam.typeId" placeholder="请选择" style="width:400px;">
              <el-option v-for="item in typeIdList" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="code">
            <span slot="label">联系人</span>
            <el-input v-model="tableParam.roadworklInkman" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <span slot="label">施工单位</span>
            <el-input v-model="tableParam.roadwork" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="tableParamType=false,tableParam.typeId='',tableParam.roadworklInkman='',tableParam.roadwork=''">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="gettableData(),tableParamType=false">搜 索</el-button>
      </span>
    </el-dialog>
    <!-- 添加机会 -->
    <el-dialog v-dialogDrag :visible.sync="addType" width="1085px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">添加</span>
      <div class="dialoginfo">
        <el-form ref="refformDate" :inline="true" :model="formDate" label-width="110px" hide-required-asterisk :rules="rules2">
          <div class="form-title">工程基本信息</div>
          <el-form-item prop="name" :rules="[{required: true,message: '请输入工程名称',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">工程名称</span>
            <el-input v-model="formDate.name" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="place" :rules="[{required: true,message: '请输入地理位置',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">地理位置</span>
            <el-input v-model="formDate.place" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label-width="160px">
            <span slot="label">预估用砼量（方）</span>
            <el-input v-model="formDate.expectedAmount" style="width: 176px;" placeholder="请输入" onkeypress='return( /\d|\./.test(String.fromCharCode(event.keyCode)))' @input="formDate.expectedAmount=$regExp.checkNum(formDate.expectedAmount)" @blur="formDate.expectedAmount=$regExp.blurCheckNum(formDate.expectedAmount)"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">工程性质</span>
            <el-select ref="typeId" v-model="formDate.typeId" placeholder="请选择" @change="$nextTick(()=>{formDate.type = $refs.typeId.selectedLabel})">
              <el-option v-for="(item, index) in typeIdList" :key="index" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">项目进度</span>
            <el-select ref="rateOfProgressId" v-model="formDate.rateOfProgressId" placeholder="请选择" @change="$nextTick(()=>{formDate.rateOfProgress = $refs.rateOfProgressId.selectedLabel})">
              <el-option v-for="(item, index) in rateOfProgressIdList" :key="index" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">起供时间</span>
            <el-date-picker v-model="formDate.startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">管柱（米）</span>
            <el-input v-model="formDate.tubularColumn" placeholder="请输入" onkeypress='return( /\d|\./.test(String.fromCharCode(event.keyCode)))' @input="formDate.tubularColumn=$regExp.checkNum(formDate.tubularColumn)" @blur="formDate.tubularColumn=$regExp.blurCheckNum(formDate.tubularColumn)"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">装配式</span>
            <el-input v-model="formDate.fabricated" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">行政区</span>
            <el-cascader ref="address" v-model="formDate.administrativeDistricts0" style="width:227px;" :options="treeData" filterable @change="administrativeDistrictsFun()"></el-cascader>
          </el-form-item>
          <div>
            <el-form-item>
              <span slot="label">建设单位</span>
              <el-input v-model="formDate.constructionUnit" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <span slot="label">联系人</span>
              <el-input v-model="formDate.cuLinkman" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item prop="cuPhone">
              <span slot="label">电话</span>
              <el-input v-model="formDate.cuPhone" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
              <span slot="label">施工单位</span>
              <el-input v-model="formDate.roadwork" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <span slot="label">联系人</span>
              <el-input v-model="formDate.roadworklInkman" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item prop="roadworkPhone">
              <span slot="label">电话</span>
              <el-input v-model="formDate.roadworkPhone" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <el-form-item>
            <span slot="label">备注</span>
            <el-input v-model="formDate.remark" style="width: 920px;" type="textarea" :rows="5" resize="none" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="addType=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="salesLeadssaveFun()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import treeData from '@/views/platform/ICPS/basicConfig/address.js';
import regproject from "./components/regproject.vue";
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPageB,
  getsaleProgress,
  savesaleProgress,
  assignOrRedeploy,
  saveengineeringManagement,
  salesLeadssave
} from "@/api/internetSales/chanceManagement.js";
import { getDicType } from "@/api/common.js";
import { getUserInfo } from "@/utils/auth.js";
export default {
  components: {
    regproject,
  },
  mixins: [mixin],
  data() {
    var landlinePhone = (rule, value, callback) => {
      if (value && !this.$regExp.landlinePhoneReg(value)) {
        return callback(new Error('电话格式错误！'));
      } else {
        callback();
      }
    };
    return {
      TreeSelectStypeNumber: 0,
      UserInfo: '',
      typeIdList: [],
      tableParamType: false,
      /*表格增删改查及下载接口*/
      queryPage: queryPageB,
      pagesType: 0,
      rules: {
        remark: [{ required: true, message: "请输入原因", trigger: "blur" }],
      },
      reasonForm: {
        id: "",
        remark: "",
      },
      ignoreVisible: false,
      ignoreids: [],
      salesLeadsStatusList: [
        { name: "未处理", id: 1 },
        { name: "分派", id: 2 },
        { name: "转派", id: 3 },
        { name: "跟进中", id: 4 },
        { name: "申请停止跟进", id: 5 },
        { name: "已停止", id: 6 },
        { name: "忽略", id: 7 },
        { name: "已登记", id: 8 },
      ],
      datailsDialog: false,
      datailsData: {},
      imgsDialog: false,
      srcList: [],
      saleProgressDialog: false,
      itemdata: {},
      disabled: true,
      saleProgressData: [],
      saleProgresscontent: "",
      visitedata: {},
      visited: false,
      executePhaseType: false,
      formDate: { salesLeadsStatus: 4, dataFrom: 1, name: '', place: '', roadworkId: '', expectedAmount: '', typeId: '', rateOfProgressId: '', administrativeDistricts0: '', roadworkPhone: '', cuPhone: '' },
      addType: false,
      rateOfProgressIdList: [],
      treeData,
      rules2: {
        roadworkPhone: [{ validator: landlinePhone, trigger: 'change' }],
        cuPhone: [{ validator: landlinePhone, trigger: 'change' }],
      },
    };
  },
  async created() {
    this.UserInfo = await getUserInfo();
    this.treeData.forEach((v) => {
      v.selectable = false
      v.children.map((res) => {
        res.selectable = false
      })
    })
    this.tableParam = { ...this.tableParam, name: "", salesLeadsStatus: "", status: 1, typeId: '', roadworklInkman: '', roadwork: '' };
    this.init();
    getDicType({ code: "EngineeringNature" }).then((res) => {
      this.typeIdList = res.data.items;
    });
    getDicType({ code: "ProjectProgress" }).then((res) => {
      this.rateOfProgressIdList = res.data.items;
    });
  },
  watch: {
    saleProgresscontent() {
      if (this.saleProgresscontent == "") {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
  methods: {
    /**添加机会 */
    salesLeadssaveFun() {
      this.$refs.refformDate.validate((valid) => {
        if (valid) {
          this.formDate.salesman = this.UserInfo.userRealName
          this.formDate.salesmanId = this.UserInfo.userId
          if (this.$refs.address.getCheckedNodes()[0]){
            this.formDate.administrativeDistrictsName = this.$refs.address.getCheckedNodes()[0].pathLabels.join('-')
          }
          salesLeadssave(this.formDate).then((res) => {
            if (res.code == 1001) {
              this.addType = false
              this.$message({
                message: '操作成功',
                type: 'success'
              });
            }
            this.gettableData();
          })
        }
      });
    },
    administrativeDistrictsFun() {
      this.formDate.administrativeDistricts = JSON.stringify(this.formDate.administrativeDistricts0)
      this.$forceUpdate()
    },
    addForm() {
      this.addType = true;
      this.$nextTick(() => {
        this.$refs.refformDate.resetFields();
        this.formDate.expectedAmount = '';
      })
    },
    changeVisited(data, status, executePhaseType) {
      this.visited = status;
      this.visitedata = data;
      this.executePhaseType = executePhaseType
    },
    close() {
      this.visitedata = "";
      this.visited = false;
    },
    sumbit(data) {
      saveengineeringManagement(data).then((res) => {
        if (res.code * 1 === 1001) {
          this.visited = false;
          let data = new Object();
          data.id = this.visitedata.id;
          data.salesLeadsStatus = 8;
          assignOrRedeploy(data).then((res) => {
            if (res.code * 1 === 1001) {
              this.$message.success('保存成功')
              this.gettableData()
            }
          });
        }
      });
    },
    changesaleProgress(data) {
      getsaleProgress({ enginnerId: data.id }).then((res) => {
        this.saleProgressData = res.data;
        this.itemdata = data;
        this.saleProgressDialog = true;
      });
    },
    /**追加跟进记录 */
    sumbitsaleProgress() {
      let data = {
        enginnerId: this.itemdata.id,
        content: this.saleProgresscontent,
      };
      savesaleProgress(data).then(() => {
        this.saleProgressDialog = false;
        this.saleProgresscontent = "";
      });
    },
    showimgs() {
      this.srcList = this.datailsData.imgs.split(",");
      this.srcList = this.srcList.map(res => ('/file/' + res))
      this.imgsDialog = true;
    },
    datails(data) {
      this.datailsData = data;
      this.datailsDialog = true;
    },
    init() {
      /*重置数据*/
      this.tableParam.name = "";
      this.tableParam.salesLeadsStatus = "";
      this.gettableData();
    },
    ignoreSubmit(data) {
      this.reasonForm.id = data.id;
      this.ignoreVisible = true;
    },
    shareHandle(index) {
      console.log(index);
      this.personVisible = true;
    },
    searchSubmit() {
      let _this = this;
      _this.$refs.refreasonForm.validate((valid) => {
        if (valid) {
          let data = new Object();
          data.id = _this.reasonForm.id;
          data.salesLeadsStatus = 5;
          data.stopReason = _this.reasonForm.remark;
          assignOrRedeploy(data).then(() => {
            this.itemdata.id = _this.reasonForm.id
            this.saleProgresscontent = _this.reasonForm.remark
            this.sumbitsaleProgress()
            _this.gettableData();
            _this.ignoreVisible = false;
            _this.$refs.refreasonForm.resetFields();
          });
        } else {
          return false;
        }
      });
    },
    TreeSelectStypeFun() {
      if (this.TreeSelectStypeNumber === 0) {
        this.TreeSelectStypeNumber = 1;
        setTimeout(() => {
          const dom = document.body.lastChild;
          dom.style.zIndex = '10000'
        }, 1000)
      }
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.styleA {
  overflow: auto;
  max-height: calc(85vh - 266px);
  padding-right: 10px;
}
.styleB {
  overflow: auto;
  max-height: calc(85vh - 366px);
  padding-right: 10px;
}
.saledialoginfo {
  padding: 20px 20px 0 0px;
  max-height: calc(85vh - 220px);
}
.el-input,
.el-select {
  width: 240px;
}
.top_link {
  color: #008000;
}
.top_link:hover {
  cursor: pointer;
  opacity: 0.7;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.tabtop {
  width: 378px;
  display: flex;
  border: $bg_color 1px solid;
  border-radius: 4px;
  margin: 20px 20px 0 20px;
  > div {
    height: 40px;
    width: 190px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    .text {
      width: 188px;
      @include discen;
      line-height: 40px;
      color: $bg_color;
    }
    .active {
      width: 188px;
      @include discen;
      line-height: 40px;
      color: #ffffff;
      background: $bg_color;
      border-radius: 4px;
    }
    .hr {
      height: 20px;
      width: 2px;
      background: $bg_color;
    }
  }
}
.el-input,
.el-select {
  width: 227px;
}
.dialoginfo {
  padding: 0;
}
.form-title {
  font-size: 18px;
  margin: 10px 0;
}
</style>
